import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
import axios from 'axios'
import { getStore } from '@/utils/storage'
import VueLazyload from 'vue-lazyload'

Vue.config.productionTip = false
// 挂载axios到vue的原型，由于继承性，所有的组件都可以使用this.$http
Vue.prototype.$http = axios

// 请求拦截，确认用户是否登入
// axios拦截器
axios.interceptors.request.use(config => {
  const token = getStore('token')
  if (token) {
    // 表示用户已登录,给每一条数据请求头添加Authorization
    config.headers.common.Authorization = token
  }
  return config
}, error => {
  return Promise.reject(error)
})

// 导航守卫主要用来通过跳转或取消的方式守卫导航
// 全局用户界面验证，每一个请求都要验证
router.beforeEach((to, from, next) => {
  axios.post('/api/validate', {}).then(res => {
    const data = res.data
    if (data.state !== 1) { // 用户暂未登录
      if (to.matched.some(record => record.meta.auth)) {
        // 一个路由匹配到的所有路由记录会暴露为 $route 对象（还有在导航钩子中的 route 对象）的 $route.matched 数组。
        // some() 方法测试数组中的某些元素是否通过了指定函数的测试。
        /*
            返回遍历的某个路由对象，我们定义为为record，检测这个对象是否拥有meta这个对象，
            如果有meta这个对象，检测它的meta对象是不是有auth这个属性，且为true，如果满足上述条件，就确定了是这个要检测的路由
        */
        // 验证路由record.meta.auth是为true，是则表示用户未登录，同时他想要跳转登录页面
        next({
          path: '/login',
          query: {
            redirect: to.fullPath // 把要跳转的地址作为参数传到下一步
          }
        })
      } else {
        next()
      }
    } else {
      // 已经登录，在公共数据store保存用户的信息
      store.commit('ISLOGIN', data)

      if (to.path === '/login') {
        router.push({
          path: '/'
        })
      }
      next()
    }
  }).catch(error => {
    console.log(error)
  })
})

// 使用 vue-lazyload, 图片懒加载
Vue.use(VueLazyload)
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'static/images/error.png',
  loading: 'static/images/load.gif',
  attempt: 1
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
